<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title>

    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#clock {
	width: 300px;height: 300px;border: 10px solid black;position: absolute;left: 50%;top: 50%;
	margin: -155px 0 0 -155px;border-radius:50%; 
	background: #ccc;
}
#clock-y{

	width: 20px;height: 20px;border-radius:50%;background: black;
	position: absolute;left: 50%;top: 50%;
	margin:-10px 0 0 -10px;  
	z-index: 5;
}
#seconds
{
	width: 2px;height: 120px;
	background: red;
	margin-left: 9px;
	margin-top: -110px;
	z-index: 1;
	transform-origin:bottom center;
	

}
#minutes
{
	width: 4px;height: 100px;
	background: blue;
	margin-left: 8px;
	margin-top: -100px;
	z-index: 2;
	transform-origin:bottom center;
	

}
#Hourse
{
	width: 8px;height: 60px;
	background: black;
	margin-left: 6px;
	margin-top: -60px;
	z-index: 3;
	transform-origin:bottom center;
}
#gai{
	width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index:5;background: black;border-radius:50%; 
}
.bz{width: 100%;height: 10px;position: absolute;top: 50%;margin-top: -5px;-background: black;
	-transform:rotate(30deg);
}
.bz .l{
	width: 20px;height: 100%;position: absolute;left: 0;background: black;
}
.bz .r{
	width: 20px;height: 100%;position: absolute;right: 0;background: black;
}	

.xz{width: 100%;height: 6px;position: absolute;top: 50%;margin-top: -3px;-background: black;
	-transform:rotate(30deg);
}
.xz .l{
	width: 10px;height: 100%;position: absolute;left: 0;background: black;
}
.xz .r{
	width: 10px;height: 100%;position: absolute;right: 0;background: black;
}
.Num{
	width: 50%;height: 20px;line-height: 20px;
	-background: black;position:absolute; top:50%;margin-top: -10px;-text-indent: 30px;
	transform-origin:right center;
	transform:rotate(30deg);
}
.Num span{
	float: left;
	margin-left: 30px;
	transform: rotate(-30deg)
}

    </style> 

</head>
<body>
<div id='clock'>
	<!--
	<div class='xz'>
		<div class='l'></div>
		<div class='r'></div>
	</div>
	-->
	
	<div id='clock-y'>
		
		<div id='seconds'></div>
		<div id='minutes'></div>
		<div id='Hourse'></div>
		<div id='gai'></div>
	</div>

	<!--
	<div class='Num'><span>1</span></div>
	-->
</div>
<script type="text/javascript">
	

/*
	60 - 12 = 48
	360 / 60  = 6deg

	60 - 6deg
	10 - 1deg
	1 - 0.6deg


*/
var BZz = [
		"<div class='l'></div>",
		"<div class='r'></div>",
].join('');


for(var i = 0;i < 12;i++){
	var oDiv = document.createElement('div');
	oDiv.className = 'Num';
	oDiv.style.transform = 'rotate('+(i*30+120)+'deg)';
	oDiv.innerHTML = '<span style="transform:rotate('+((i*-30)-120)+'deg)">'+((i+1))+'</span>';

	clock.appendChild(oDiv);
}
for(var i = 0;i < 6;i ++){
	var oDiv = document.createElement('div');
	oDiv.className = 'bz';
	oDiv.innerHTML = BZz;
	oDiv.style.transform = 'rotate('+i*30+'deg)';
	clock.appendChild(oDiv);
}
for(var i = 0;i < 60;i++){
	if(i%5==0)continue;
	var oDiv = document.createElement('div');
	oDiv.className = 'xz';
	oDiv.innerHTML = BZz;
	oDiv.style.transform = 'rotate('+i*6+'deg)';
	clock.appendChild(oDiv);
}

var oDate = new Date();
/*1m - 6deg*/
/*
  360deg
  12
*/
var oS = oDate.getSeconds();
var oM = oDate.getMinutes();
var oH = oDate.getHours();
seconds.style.transform = 'rotate('+oS*6+'deg)';
//minutes.style.transform = 'rotate('+oM*6+'deg)';
minutes.style.transform = 'rotate('+oM*6+'deg)';
Hourse.style.transform = 'rotate('+(oH%12)*30+'deg)';

setInterval(function(){
	var oDate = new Date();
	/*1m - 6deg*/
	var oS = oDate.getSeconds();
	var oM = oDate.getMinutes();
	var oH = oDate.getHours();
	seconds.style.transform = 'rotate('+oS*6+'deg)';
	minutes.style.transform = 'rotate('+(oM*6)+'deg)';
	Hourse.style.transform = 'rotate('+(oH%12)*30+'deg)';

},1000);


</script>
</body>
</html>